<script setup>
import { MarkerType, useVueFlow } from '@vue-flow/core';
import { defineEmits, ref } from 'vue';

const emits = defineEmits(['edgeControlsClose']);

const props = defineProps({
  edge: {
    type: Object,
    required: true,
  },
})

const {
  getEdges,
} = useVueFlow()

const instance = useVueFlow()
const edge = props.edge.id ? instance.findEdge(props.edge.id) : findEdgeBySelected()

console.log(edge.label)

function findEdgeBySelected() {
  for (const edge of getEdges.value) {
    if(edge.selected){
      return edge;
    }
  }
  return null;
}

// console.log('findEdgeBySelected()',findEdgeBySelected())

const focused = ref(false);

function handleFocus() {
  focused.value = true;
}

function handleBlur() {
  focused.value = false;
}

watch(edge, val => {
  //路径失去焦点
  if(!val.selected && !focused){
    emits('edgeControlsClose', { })
  }
})

const edgeLabel = ref(props.edge.label || '')
const edgeAnimated = ref(props.edge.animated || true)
const edgeMarkerEnd = ref(props.edge.markerEnd == 'arrowclosed' ? 'ArrowClosed' : 'Arrow')

watch(edgeLabel, val => {
  edge.label = val
})

watch(edgeAnimated, val => {
  edge.animated = val
})

watch(edgeMarkerEnd, val => {
  if(val == 'Arrow'){
    edge.markerEnd = MarkerType.Arrow
  }else{
    edge.markerEnd = MarkerType.ArrowClosed
  }
})
</script>

<template>
  <div class="edge-controls"
    
  >
    <vs-divider border-style="dashed" position="center" style="font-size: 16px;font-weight: bold;">
      路径属性设置
    </vs-divider>
    <div class="m-2">
      <label class="label">
        <VsInput  
          tabindex="0"
          @focus="handleFocus"
          @blur="handleBlur"
          id="draggable"
          v-model="edgeLabel"
          label-placeholder="路径名称"
        />
      </label>
    </div>
    <vs-divider border-style="dashed" position="center" style="font-size: 16px;font-weight: bold;">
      路径样式设置
    </vs-divider>
    <div class="m-2">
      <label class="label open-path-animated">
        <VsCheckbox v-model="edgeAnimated">
          开启路径动画
        </VsCheckbox>
      </label>
    </div>
    
    <div class="m-2">
      <span>
        <VsRadio
          class="edge-marker"
          v-model="edgeMarkerEnd"
          vs-name="radios1"
          vs-value="ArrowClosed"
        >
        路径箭头关闭
        </VsRadio>
        <VsRadio
          v-model="edgeMarkerEnd"
          vs-name="radios1"
          vs-value="Arrow"
        >
          路径箭头
        </VsRadio>
      </span>
    </div>
  </div>
</template>

<style>
.edge-marker{
  float: inline-start;
}

.edge-controls{
  position:absolute;
  z-index:4;
  padding:8px;
  background-color:#fff;
  border-end-start-radius:10px;
  font-size:11px;
  inset-block-start: 15px;
  inset-inline-end: 48px;
}

.edge-controls .label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:5px
}

.edge-controls .label input{
  cursor:pointer
}

.open-path-animated .con-vs-checkbox{
  margin: 0 !important;
}
</style>
